<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isScrolled = ref(false)
const audio = ref(null)
const isPlaying = ref(false)

// 导航栏滚动效果
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

// 平滑滚动功能
const scrollToSection = (id) => {
  const element = document.getElementById(id)
  if (element) {
    window.scrollTo({
      top: element.offsetTop - 80,
      behavior: 'smooth'
    })
  }
}

// 初始化背景音乐
const initBackgroundMusic = () => {
  audio.value = document.createElement('audio')
  audio.value.id = 'bgMusic'
  audio.value.src = '/bgm/心之纲.mp3'
  audio.value.loop = true
  audio.value.volume = 0.5
  document.body.appendChild(audio.value)
  
  const musicContainer = document.createElement('div')
  musicContainer.style.position = 'fixed'
  musicContainer.style.bottom = '20px'
  musicContainer.style.right = '20px'
  musicContainer.style.zIndex = '9999'
  
  const toggleBtn = document.createElement('button')
  toggleBtn.id = 'musicToggle'
  toggleBtn.style.background = 'rgba(106, 13, 173, 0.8)'
  toggleBtn.style.color = 'white'
  toggleBtn.style.border = 'none'
  toggleBtn.style.borderRadius = '50%'
  toggleBtn.style.width = '50px'
  toggleBtn.style.height = '50px'
  toggleBtn.style.cursor = 'pointer'
  toggleBtn.style.display = 'flex'
  toggleBtn.style.alignItems = 'center'
  toggleBtn.style.justifyContent = 'center'
  toggleBtn.style.fontSize = '20px'
  toggleBtn.textContent = '🔊'
  
  toggleBtn.addEventListener('click', () => {
    if (isPlaying.value) {
      audio.value.pause()
      toggleBtn.textContent = '🔇'
    } else {
      audio.value.play().then(() => {
        console.log('音乐开始播放')
      }).catch(e => {
        console.error('播放失败:', e)
      })
      toggleBtn.textContent = '🔊'
    }
    isPlaying.value = !isPlaying.value
  })
  
  musicContainer.appendChild(toggleBtn)
  document.body.appendChild(musicContainer)
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  initBackgroundMusic()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  // 清理音频元素
  if (audio.value) {
    audio.value.pause()
    document.body.removeChild(audio.value)
  }
  const musicToggle = document.getElementById('musicToggle')
  if (musicToggle && musicToggle.parentNode) {
    document.body.removeChild(musicToggle.parentNode)
  }
})
</script>

<template>
  <main class="content-container">
    <!-- 标题区域 -->
    <section class="section-header">
      <h1 class="section-title gradient-text" data-text="羁绊系统">羁绊系统</h1>
      <p class="section-subtitle">探索游戏中的各种羁绊效果，打造强力阵容</p>
    </section>

    <!-- 羁绊列表 -->
    <section class="synergies-container">
      <!-- K/DA 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #6c2bd9, #c756ff);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #ffffff; text-shadow: 2px 2px 4px rgba(108, 43, 217, 0.8);">K/DA</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #ffffff;">3/5/7/10</span>
            <span style="color: #ffffff;">: 所有在战斗开始时处于灯光格的弈子们都会获得最大生命值、法术强度和攻击力加成。【K/DA】弈子们则会全力以赴，获得双倍此加成。随着更多的K/DA成员登场，羁绊达到更高阶数后还将获得更多生命值、攻击力和法术强度。</span>
          </div>
          <div class="synergy-bonus-item" style="font-style: italic; color: #ffd700;">
            <span>提示：</span>
            <span>灯光格的分布在每局游戏都会变更。</span>
          </div>
        </div>
        <div class="synergy-heroes">
          <div class="hero-icon-small">
            <img src="/img/1.jpg" alt="阿狸" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/2.jpg" alt="卡莎" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/3.jpg" alt="阿卡丽" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/4.jpg" alt="伊芙琳" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/11.jpg" alt="约德尔人" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>

      <!-- 真实伤害 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Impact', sans-serif; background: linear-gradient(135deg, #ff4757, #ff6348);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #ffffff; text-shadow: 2px 2px 4px rgba(255, 71, 87, 0.8);">真实伤害</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #ffffff;">2/4/6/9</span>
            <span style="color: #ffffff;">: 【真实伤害】弈子们会造成额外真实伤害。</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #ffffff;">装备加成</span>
            <span style="color: #ffffff;">: 配备装备后的【真实伤害】棋子们会为其技能带来额外的【闪亮加成】。</span>
          </div>
        </div>
        <div class="synergy-heroes">
          <div class="hero-icon-small">
            <img src="/img/4.jpg" alt="艾克" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/5.webp" alt="奇亚娜" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/6.webp" alt="莎弥拉" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/7.webp" alt="亚索" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/22.jpg" alt="挑战者" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>

      <!-- 五杀摇滚乐队 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Georgia', serif; background: linear-gradient(to bottom, #8B0000, #660000);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #FFD700; text-shadow: 2px 2px 4px rgba(139, 0, 0, 0.8);">五杀摇滚乐队</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #FFD700;">3/5/7/10</span>
            <span>: 【五杀摇滚】弈子们造成更多伤害并获得20%伤害减免</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #FFD700;">击败强化</span>
            <span>: 击败一个英雄会强化一个【五杀摇滚】弈子，使其额外伤害提升</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #FFD700;">击杀成长</span>
            <span>: 随着击杀次数提升，将会强化所有【五杀摇滚】弈子并且你的队伍会获得更高的攻击速度</span>
          </div>
        </div>
        <div class="synergy-heroes">
          <div class="hero-icon-small">
            <img src="/img/7.webp" alt="卡尔萨斯" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/8.webp" alt="约里克" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/9.webp" alt="奥拉夫" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/10.webp" alt="莫德凯撒" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/33.jpg" alt="强袭炮手" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>

      <!-- 心之钢 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Trebuchet MS', sans-serif; background: linear-gradient(to bottom, #708090, #2F4F4F);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #CD853F; text-shadow: 2px 2px 4px rgba(112, 128, 144, 0.8);">心之钢</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #CD853F;">3/5/7/9</span>
            <span>: 【心之钢】弈子们通过击败英雄来获得心能，输掉玩家战斗回合则会获得更多心能</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #CD853F;">心能转化</span>
            <span>: 每经过4场玩家战斗回合，就会将心能转化为强力奖励！</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #CD853F;">成员加成</span>
            <span>: 你每登场一个【心之钢】成员，都会提升获得的心能数量</span>
          </div>
        </div>
        <div class="synergy-heroes">
          <div class="hero-icon-small">
            <img src="/img/10.webp" alt="奥恩" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/1.jpg" alt="赛恩" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/2.jpg" alt="塔姆" />
          </div>
          <div class="hero-icon-small">
            <img src="/img/3.jpg" alt="波比" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/44.jpg" alt="虚空" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>

      <!-- 戏乐家烬 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Playfair Display', serif; background: linear-gradient(to bottom, #2C3E50, #34495E);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #F39C12; text-shadow: 2px 2px 4px rgba(44, 62, 80, 0.8);">戏乐家 烬</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #F39C12;">攻击转化</span>
            <span>: 身为戏乐家，烬可将额外攻击速度转化为攻击力</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #F39C12;">消亡协奏曲</span>
            <span>: 烬的技能"消亡协奏曲"可将他的盛大终章步枪放在备战席的空格上。如果你的备战席有4支盛大终章步枪，烬会开始指挥齐射而非攻击，每轮齐射获得10点法力值</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #F39C12;">戏剧性伤害</span>
            <span>: 每4次齐射都会造成戏剧性的额外伤害</span>
          </div>
        </div>
        <div class="synergy-heroes" style="justify-content: center;">
          <div class="hero-icon-small" style="transform: scale(1.2);">
            <img src="/img/55.jpg" alt="戏乐家烬" style="border-radius: 50%; border: 3px solid #F39C12;" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/55.jpg" alt="光明哨兵" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>

      <!-- 混音大师娑娜 羁绊卡片 -->
      <div class="synergy-card hover-lift" style="font-family: 'Trebuchet MS', sans-serif; background: linear-gradient(to bottom, #8A2BE2, #9370DB);">
        <h3 class="synergy-name" style="font-size: 1.8rem; color: #FFFF00; text-shadow: 2px 2px 4px rgba(138, 43, 226, 0.8);">混音大师 娑娜</h3>
        <div class="synergy-bonus">
          <div class="synergy-bonus-item active">
            <span style="font-weight: bold; color: #FFFF00;">模式选择</span>
            <span>: 娑娜的混音大师羁绊允许你选择一个模式，改变她的技能和攻击</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #FFFF00;">灵活适配</span>
            <span>: 你可以根据自己阵容的需要，选择三个模式之一</span>
          </div>
          <div class="synergy-bonus-item">
            <span style="font-weight: bold; color: #FFFF00;">模式效果</span>
            <span>: 提供额外治疗、全队攻速提升或更高伤害输出</span>
          </div>
        </div>
        <div class="synergy-heroes" style="justify-content: center;">
          <div class="hero-icon-small" style="transform: scale(1.2);">
            <img src="/img/66.jpg" alt="混音大师娑娜" style="border-radius: 50%; border: 3px solid #FFFF00;" />
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-bottom: 15px;">
        <img src="/img/66.jpg" alt="暗夜使者" style="max-width: 100%; height: auto; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);" />
      </div>
    </section>
  </main>
</template>

<style scoped>
/* 基础颜色变量 */
:root {
  /* 游戏主题色彩系统 - 赛博朋克+奇幻电竞风格 */
  --primary-color: #6A0DAD; /* 科技紫 - 主色调 */
  --primary-light: #9933FF; /* 浅科技紫 */
  --primary-dark: #3E007F; /* 深科技紫 */
  --secondary-color: #FFD700; /* 金属金 - 主色调 */
  --secondary-light: #FFEC8B; /* 浅金色 */
  --secondary-dark: #B8860B; /* 深金色 */
  --accent-color: #FF1493; /* 霓虹粉 - 辅助色 */
  --accent-light: #FF69B4; /* 浅霓虹粉 */
  --dark-blue: #00008B; /* 深空蓝 - 背景层次 */
  --gold-color: #FFD700; /* 金色 */
  --silver-color: #C0C0C0; /* 银色 */
  --bronze-color: #CD7F32; /* 铜色 */
  
  /* 背景色彩系统 */
  --bg-primary: #0A0A18; /* 深暗色主背景 */
  --bg-secondary: #121235; /* 次级背景色 */
  --bg-tertiary: #1A1A45; /* 三级背景色 */
  --bg-card: rgba(42, 20, 75, 0.8); /* 卡片背景色 */
  --bg-card-hover: rgba(59, 29, 105, 0.9); /* 卡片悬停背景色 */
  --bg-gradient: linear-gradient(135deg, #6A0DAD 0%, #00008B 100%); /* 渐变背景 */
  --bg-glass: rgba(106, 13, 173, 0.15); /* 毛玻璃效果 */
  
  /* 文本色彩系统 */
  --text-primary: #FFFFFF; /* 主文本色-白色 */
  --text-secondary: #E0E0E0; /* 次要文本色-浅灰白 */
  --text-muted: #A0A0A0; /* -muted文本色-灰色 */
  --text-accent: #FF1493; /* 强调文本色-霓虹粉 */
  
  /* 边框色彩系统 */
  --border-primary: rgba(106, 13, 173, 0.7); /* 主边框色-科技紫 */
  --border-secondary: rgba(106, 13, 173, 0.4); /* 次边框色-浅科技紫 */
  --border-glow: rgba(255, 215, 0, 0.6); /* 发光边框色-金色光晕 */
  --border-neon: rgba(255, 20, 147, 0.8); /* 霓虹边框色-用于强调 */
  
  /* 尺寸系统 */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 50%;
  
  /* 阴影系统 - 赛博朋克风格光晕 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(106, 13, 173, 0.2);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(106, 13, 173, 0.3);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(106, 13, 173, 0.4);
  --shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(106, 13, 173, 0.5);
  --shadow-glow: 0 0 20px rgba(106, 13, 173, 0.5);
  --shadow-glow-lg: 0 0 40px rgba(106, 13, 173, 0.7);
  --shadow-gold: 0 0 15px rgba(255, 215, 0, 0.6);
  --shadow-neon: 0 0 25px rgba(255, 20, 147, 0.7);
  --shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.2);
  
  /* 过渡系统 */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-elastic: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* 字体系统 */
  --font-main: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-title: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* 主内容样式 */
.content-container {
  padding-top: 100px;
  padding-bottom: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section-header {
  margin-bottom: 40px;
  text-align: center;
  position: relative;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* 羁绊卡片样式 */
.synergies-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.synergy-card {
  background: var(--bg-card);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-lg);
  padding: 25px;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.synergy-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow);
}

.synergy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.synergy-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.synergy-bonus {
  margin-bottom: 20px;
}

.synergy-bonus-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.synergy-bonus-item.active {
  color: var(--secondary-light);
  font-weight: 500;
}

.synergy-heroes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-icon-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-secondary);
  transition: all var(--transition-normal);
}

.hero-icon-small:hover {
  border-color: var(--secondary-color);
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--secondary-color);
}

.hero-icon-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 渐变文字效果 */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-light), var(--secondary-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

.gradient-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, var(--primary-dark), var(--secondary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.gradient-text:hover::after {
  opacity: 1;
}

/* 悬停提升效果 */
.hover-lift {
  transition: transform var(--transition-bounce), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-container {
    padding-top: 80px;
  }

  .section-title {
    font-size: 1.8rem;
  }
  
  .synergies-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
</style>